.mine {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  &.page {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 12rpx 246rpx 28rpx;
      background-image: linear-gradient(171.1deg, #1c2c60 0%, #1d2f65 -14.46%, #adb4c9 46.78%, #ea602d00 100%);

      .group {
        padding-left: 34rpx;
        padding-right: 16rpx;

        .text {
          color: #080808;
          font-size: 30rpx;
          line-height: 42rpx;
        }

        .image {
          width: 34rpx;
          height: 21.34rpx;
        }

        .image_2 {
          width: 31rpx;
          height: 23rpx;
        }

        .image_3 {
          width: 48.82rpx;
          height: 23rpx;
        }
      }

      .section_2 {
        padding: 12rpx 24rpx;
        border-radius: 50rpx;
        background-image: url('https://ide.code.fun/api/image?token=6792ed5edefdb100111367be&name=04677343bcfb76e971f8090525c519de.png');
        background-position: 0% 0%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 174rpx;

        .image-wrapper {
          width: 38rpx;

          .image_5 {
            width: 38rpx;
            height: 13rpx;
          }

          .image_4 {
            width: 35rpx;
            height: 35rpx;
          }
        }

        .section_3 {
          background-color: #00000033;
          width: 1rpx;
          height: 37rpx;
        }
      }

      .image-wrapper_2 {
        padding: 4rpx 0;
        // background-color: #ffffff;
        border-radius: 50%;
        width: 100%;

        .image_6 {
          width: 140rpx;
          height: 140rpx;
        }
      }

      .text_2 {
        color: #333333;
        font-size: 30rpx;
        font-family: "PingFang SC";
        font-weight: 500;
        line-height: 56rpx;
        text-align: center;
        width: 100%;
        display: inline-block;
        margin-top: 20rpx;
      }

      // 新的用户布局样式
      .user-layout {
        position: relative;
        height: 300rpx;
      }

      // 右上角微信用户
      .wechat-user-top {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;

        .wechat-avatar {
          width: 64rpx;
          height: 64rpx;
          border-radius: 10rpx;
          margin-right: 12rpx;
          border: 2rpx solid rgba(255, 255, 255, 0.3);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
        }

        .wechat-name {
          color: #fff;
          font-size: 26rpx;
          font-weight: 500;
          text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
        }
      }

      // 居中用户区域
      .center-user-area {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        .user-main {
          display: flex;
          align-items: flex-start;
          gap: 32rpx;
          
          // 运动员卡片
          .athlete-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .center-avatar {
              width: 140rpx;
              height: 140rpx;
              border-radius: 12rpx;
              margin-bottom: 20rpx;
              border: 3rpx solid rgba(255, 255, 255, 0.3);
              box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
              transition: all 0.3s ease;
              
              &:active {
                transform: scale(0.95);
              }
            }
            
            .placeholder-avatar {
              width: 140rpx;
              height: 140rpx;
              border-radius: 12rpx;
              margin-bottom: 20rpx;
              background: rgba(255, 255, 255, 0.1);
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2rpx dashed rgba(255, 255, 255, 0.3);
              
              .placeholder-icon {
                width: 80rpx;
                height: 80rpx;
                opacity: 0.5;
              }
            }
          }
          
          .switch-container {
            margin-top: 20rpx;
          }
        }

        .center-name {
          color: #fff;
          font-size: 36rpx;
          font-weight: 600;
          margin-bottom: 12rpx;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
          letter-spacing: 1rpx;
          
          &.placeholder-text {
            font-size: 32rpx;
            opacity: 0.8;
          }
        }

        .view-more {
          color: #fff;
          font-size: 24rpx;
          opacity: 0.85;
          padding: 6rpx 16rpx;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 12rpx;
          border: 1rpx solid rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease;
          
          &:active {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(0.95);
          }
        }
        
        // 添加运动员卡片
        .add-athlete-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.95);
          }
          
          .add-icon-wrapper {
            width: 140rpx;
            height: 140rpx;
            border-radius: 12rpx;
            background: rgba(255, 255, 255, 0.1);
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2rpx dashed rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            
            .add-icon {
              font-size: 80rpx;
              color: #fff;
              font-weight: 300;
              line-height: 1;
              opacity: 0.7;
            }
          }
          
          .add-text {
            color: #fff;
            font-size: 28rpx;
            font-weight: 500;
            text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
            letter-spacing: 1rpx;
          }
          
          &:hover .add-icon-wrapper {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.5);
          }
        }

        .switch-btn {
          display: flex;
          align-items: center;
          gap: 8rpx;
          padding: 12rpx 20rpx;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
          border-radius: 24rpx;
          border: 1rpx solid rgba(255, 255, 255, 0.4);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.95);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.25));
          }

          text {
            color: #fff;
            font-size: 26rpx;
            font-weight: 500;
            text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
          }

          .switch-icon {
            width: 26rpx;
            height: 26rpx;
            filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.15));
          }
        }
      }

      // 登录按钮区域
      .login-area {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        .login-btn {
          background-color: #1d428a;
          border-radius: 10rpx;
          height: 70rpx;
          line-height: 70rpx;
          padding: 0 40rpx;
          border: none;

          &::after {
            border: none;
          }

          .login-text {
            color: #fff;
            font-size: 34rpx;
            line-height: 36px;
            letter-spacing: 6rpx;
          }
        }
      }

      .equal-division {
        margin-left: 4rpx;
        margin-right: 18rpx;

        .equal-division-item {
          flex: 1 1 328rpx;

          .font_2 {
            font-size: 32rpx;
            font-family: 'PingFang SC';
            line-height: 44rpx;
            font-weight: 500;
            color: #333333;
          }

          .font_3 {
            font-size: 40rpx;
            font-family: 'DIN Alternate';
            line-height: 48rpx;
            font-weight: 700;
            color: #ea602d;
          }

          .image_7 {
            border-radius: 50%;
            width: 96rpx;
            height: 96rpx;
          }
        }

        .section_4 {
          padding: 32rpx;
          border-radius: 24rpx;
          background-image: url('https://ide.code.fun/api/image?token=6792ed5edefdb100111367be&name=a45e0deb3ff74dd254cf058474d46531.png');
          background-position: 0% 0%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 166rpx;
        }

        .section_5 {
          padding: 32rpx;
          border-radius: 24rpx;
          background-image: url('https://ide.code.fun/api/image?token=6792ed5edefdb100111367be&name=206791c775ba240a9a63c65bcc39a0e3.png');
          background-position: 0% 0%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 166rpx;
        }
      }
    }

    .list {
      margin: -214rpx 24rpx 0 32rpx;
      padding: 0 32rpx;
      background-color: #ffffff;
      border-radius: 24rpx;

      .list-item {
        padding: 32rpx 0;
        border-bottom: solid 2rpx #f3f3f3;
        .image_8 {
          width: 36rpx;
          height: 36rpx;
        }

        .image_9 {
          margin-right: 8rpx;
          width: 15rpx;
          height: 25rpx;
        }
      }
    }

    .font {
      font-size: 28rpx;
      font-family: 'PingFang SC';
      line-height: 40rpx;
      font-weight: 500;
      color: #333333;
    }
    .text-wrapper {
      width: 90%;
      height: 90rpx;
      background-color: #4444441a;
      box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
      border-radius: 22rpx;
      border: unset !important;
      &::after {
        border: unset !important;
      }
      .text {
        color: #444444;
        font-size: 36rpx;
        font-family: 'PingFang SC';
        line-height: 90rpx;
      }
    }
  }
  
  // 运动员选择弹窗样式
  .athlete-popup {
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    max-height: 80vh;
    margin-bottom: 182rpx;
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 32rpx 24rpx 32rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f5f5f5;
        
        .close-text {
          font-size: 40rpx;
          color: #999;
          line-height: 1;
        }
      }
    }
    
    .popup-scroll {
      max-height: 60vh;
      padding: 32rpx 32rpx 24rpx 32rpx;
      width: 90%;
      .empty-state {
        text-align: center;
        padding: 60rpx 0;
        color: #999;
        font-size: 28rpx;
      }
      
      .player-item {
        display: flex;
        align-items: center;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        &.selected {
          background: #f8f9ff;
          border-radius: 12rpx;
          padding: 24rpx 16rpx;
          margin: 0 -16rpx;
        }
        
        .player-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 24rpx;
        }
        
        .player-info {
          flex: 1;
          
          .player-name {
            display: block;
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 8rpx;
          }
          
          .player-mobile {
            display: block;
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .status {
          font-size: 26rpx;
          color: #213165;
          padding: 8rpx 16rpx;
          border: 1rpx solid #213165;
          border-radius: 20rpx;
        }
        
        .status-selected {
          font-size: 26rpx;
          color: #fff;
          background: #213165;
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}